<template>
   <div class="my_container">
    <van-cell-group>
      <van-field v-model="email" label="邮箱" placeholder="请输入邮箱号" required />
      <van-field v-model="pwd" type="password" label="修改密码" placeholder="请输入新密码" required />
      <van-field v-model="vCode" center clearable required label="邮箱验证码" placeholder="请输入邮箱验证码">
        <van-button slot="button" size="small" type="primary" @click="sendVcode">发送验证码</van-button>
      </van-field>
    </van-cell-group>
    <van-button type="primary" size="large" @click="findPassword" class="modifyBtn">修改密码</van-button>
   </div>
</template>

<script>
export default {
  name: 'userFindPassword',
  data () {
    return {
      email:'',
       pwd:'',
        vCode:'',
    }
  },
  methods: {
     async sendVcode(){
      if(this.email.trim()==''){
        this.$toast("请输入邮箱账号")
        return
      }
      let res = await this.$axios.get('/api2/users/verify',{
        params:{
          email:this.email
        }
      });      
      if(res.status === 0){
        this.$toast("验证码已发送")
      }else {
        this.$toast("验证码发送失败,请稍候再试")
      }

    },
    async findPassword(){
      let res = await this.$axios.post('/api2/users/findPassword',{
        email:this.email,
        pwd:this.pwd,
        vCode:this.vCode,
      })
      if(res.status!==0)return this.$toast("修改失败,请重新确认")
      this.$toast("修改成功")
      this.$router.push('/mine/login')
      
    }
  },
}
</script>

<style scoped>
.my_container {
    padding-top: 51px;
}
.modifyBtn {
    width: 80%;
  display: block;
  margin: 15px auto 0;
}
</style>
